<!DOCTYPE html>

<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Gemeinde in Aktion</title>
	<link type="text/css" href="css/start/jquery-ui-1.8.17.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
  
	<script type="text/javascript"> 
	
	  function buildIdeaList(ideas){
	    $.each(ideas, function(i,idea){
            var newItem = '<li><b>' + idea.title + '</b>: ' + idea.description + '</li>';
            $("#ideaList").append(newItem);
        });
	  };
	
      $(document).ready(function(){
        
        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
            var uid = response.authResponse.userID;
            var accessToken = response.authResponse.accessToken;
            alert("connected: "+uid);
            FB.api('/me', function(user) {
              if (user) {
                var image = document.getElementById('fbimage');
                image.src = 'https://graph.facebook.com/' + user.id + '/picture';
                var name = document.getElementById('fbname');
                name.innerHTML = user.name
              }
            });
          } else if (response.status === 'not_authorized') {
             // the user is logged in to Facebook, 
             //but not connected to the app
             alert("not authorized");
          } else {
             // the user isn't even logged in to Facebook.
             alert("not logged in");
          }
        });
      
        $.getJSON("/ideas", {action: "getIdeas"}, function(data){         
          buildIdeaList(data.ideas);
        });
      
        $("#dialog").dialog({
          autoOpen: false,
          modal: true,
          buttons: {
            "Idee hinzufügen": function(){
              $.post("/ideas", {action: "addIdea",
                                title: $("#titleForm").val(),
                                description: $("#descriptionForm").val() }, 
                function(data2){
        		  $("#ideaList").empty();
        		  $.getJSON("/ideas", {action: "getIdeas"}, function(data){         
                    buildIdeaList(data.ideas);
                  });
                  $("#titleForm").val("");
                  $("#descriptionForm").val("");
                });
              
              $( this ).dialog( "close" );
            },
            Cancel: function(){
              $( this ).dialog( "close" );
            }
          },
          close: function(){
            $( this ).dialog( "close" );
          } 
        });
      
        $("#addIdea").click(function(ev){
          $( "#dialog" ).dialog( "open" );
        }).hover(
		  function(){ 
			$(this).addClass("ui-state-hover"); 
		  },
		  function(){ 
			$(this).removeClass("ui-state-hover"); 
		  }
	    );

        $("#fbLogin").click(function(ev){
          FB.login(function(response) {
            if (response.authResponse) {
              FB.api('/me', function(user) {
                if (user) {
                  var image = document.getElementById('fbimage');
                  image.src = 'https://graph.facebook.com/' + user.id + '/picture';
                  var name = document.getElementById('fbname');
                  name.innerHTML = user.name
                }
              });   
            } else {
              console.log('User cancelled login or did not fully authorize.');
            }
          }, {scope: 'email'});
        }).hover(
		  function(){ 
			$(this).addClass("ui-state-hover"); 
		  },
		  function(){ 
			$(this).removeClass("ui-state-hover"); 
		  }
	    );

	  });
	</script>  
  
	<style type="text/css">
	  body{ font: 80% "Trebuchet MS", sans-serif;}
	  #container{ max-width: 1024px; margin: auto;}
	  label, input { display:block; }
	  input.text { margin-bottom:12px; width:95%; padding: .4em; }
	  fieldset { padding:0; border:0; margin-top:25px; }
	  h2{margin: 10px}
	  #addIdea {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
	  #addIdea span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;}						
	  .ui-dialog .ui-state-error { padding: .3em; }
	</style>  
  
  </head>

  <body>
  <div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : '313149895398128', // App ID
      channelUrl : 'http://gemeinde-in-aktion.appspot.com/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

  <div id="container">
    <header>
      <h1>Gemeinde in Aktion</h1>
	  <div class="fb-login-button" id="fblogin">Login with Facebook</div>
	  <p><a href="#" id="fbLogin" class="ui-state-default ui-corner-all">Login</a></p>
	  <div align="right">
        <img id="fbimage"/>
        <div id="fbname"></div>
      </div>
	</header>
	
	<p><a href="#" id="addIdea" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-plusthick"></span>Neue Idee</a></p>

	<div class="ui-widget">
	  <div class="ui-widget-header ui-corner-top">
	    <h2>Ideen</h2>
      </div>
      <div class="ui-widget-content ui-corner-bottom">
        <ul id="ideaList">

        </ul>
      </div>
    </div>
    
	<div id="dialog" title="Neue Idee">
	  <form>
	  <fieldset>
		<label for="title">Titel</label>
		<input type="text" name="title" id="titleForm" class="text ui-widget-content ui-corner-all" />
		<label for="description">Beschreibung</label>
		<input type="text" name="description" id="descriptionForm" value="" class="text ui-widget-content ui-corner-all" />
	  </fieldset>
	  </form>
	</div>    
    
  </div> <!-- Container -->  
  </body>
</html>
